<!--  -->
<template>
  <!-- 窗口 -->
  <div
    class="window"
    :style="{
      width: width + 'px',
      height: height + 'px',
      backgroundColor: backgroundColor,
    }"
  >
    <!-- 标题(上下滑动) -->
    <div class="titles" :style="{ height: titleSize + 'px' }">
      <h1
        v-for="(item, index) in content"
        :key="'title' + index"
        :style="{
          fontSize: titleSize + 'px',
          lineHeight: titleSize + 'px',
          color: titleColor,
        }"
      >
        {{ item.title }}
      </h1>
    </div>
    <!-- 内容区(左右滑动) -->
    <v-touch
      class="content"
      :style="{
        borderColor: defaultColor,
        boxShadow: '0px 0px 4px 3px ' + defaultColor,
      }"
      @swipeleft="slide(1)"
      @swiperight="slide(-1)"
    >
      <!-- 包裹一层横向排列的层 -->
      <div class="wrap" :style="{ width: itemCount*100+'%' }">
        <div
        class="texts"
        v-for="(text, index) in content"
        :key="'text' + index"
        :style="{width:(100/itemCount)+'%'}"
      >
        <!-- 因为每一个页面的文字内容内肯需要换行，所以采用多段文字的方法分别打印 -->
        <p
          v-for="(line, index) in text.text"
          :key="'line' + index"
          class="text"
          :style="{ fontSize: textSize + 'px', color: textColor }"
        >
          {{ line }}
        </p>
      </div>
      </div>
    </v-touch>
    <!-- 底部点 -->
    <div class="dots">
      <div
        v-for="(item, index) in content"
        :style="{ backgroundColor: activeColor(index) }"
        :key="'dot' + index"
        class="dot"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curIndex: 0,
    }
  },

  props: {
    content: {
      typeof: Array,
      default: () => [
        {
          title: "标题",
          text: ["内容"],
        },
      ],
    },
    //-----大小------
    width: {
      type: Number,
      default: 316,
    },
    height: {
      type: Number,
      default: 466,
    },
    titleSize: {
      type: Number,
      default: 48,
    },
    textSize: {
      type: Number,
      default: 24,
    },
    //-----颜色------
    backgroundColor: {
      //窗口背景色
      type: String,
      default: "#fff",
    },
    titleColor: {
      //标题色
      type: String,
      default: "#000",
    },
    textColor: {
      //内容文本色
      type: String,
      default: "#121212A1",
    },
    defaultColor: {
      //默认色——边框、阴影、底部点（非active)
      type: String,
      default: "rgba(0, 0, 0, 0.25)",
    },
    dotColor: {
      //active的底部点色
      type: String,
      default: "#19C6A6",
    },
  },

  components: {},

  computed: {
    itemCount(){
      return this.content.length
    }
  },

  mounted() {},

  methods: {
    activeColor(index) {
      return this.curIndex === index ? this.dotColor : this.defaultColor
    },
    slide(page) {
      console.log(page)
      if(this.curIndex+page==this.itemCount || this.curIndex+page<0) return;
      this.curIndex+=page;
      
    },
  },
}
</script>
<style lang="scss" scoped>
.window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
}

.titles {
  width: 105px;
  //行高，高度都由字体大小决定
  margin: 16px auto;
  overflow: hidden;
  font-weight: bold;
  flex: none;
}

.content {
  width: 85%;
  // background: blue;
  // margin-left: 50%;
  // transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid;
  border-radius: 11px;
  font-family: jiangxizhuokai;
  text-align: start;
  background: olive;
}

.wrap{
  display: flex;
  background: olive;
}

.texts {
  overflow: auto;
  display: flex;
  flex-direction: column;
  background: orange;
  border:2px solid orangered
}

.text {
  width: 100%;
}

.dots {
  height: 8px;
  // background: red;
  margin: 12px;
  flex: none;

  .dot {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    display: inline-block;
  }
}
</style>
